<template>
    <div>  
        <!-- todo:: 增加文章搜索框 -->

        <!-- todo:: 进阶任务： 增加文章搜索的后端接口，实现文章搜索 -->

        
        <el-table
            :data="categories"
            style="width: 100%">
            <el-table-column
            prop="name"
            label="分类名称"
            width="180">
            </el-table-column>
            <el-table-column
            prop="code"
            label="分类代码"
            width="180">
            </el-table-column>
            <el-table-column
            prop="status"
            label="是否启用"
            width="180">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == 1">是</span>
                    <span v-else>否</span>
                </template>
            </el-table-column>
            <el-table-column
            prop="date"
            label="创建日期">
            </el-table-column>
            <el-table-column
            prop="date"
            label="更新日期">
            </el-table-column>

            <el-table-column
            label="操作">
            <template slot-scope="scope">
                <el-button type="primary" size="small" @click="doEdit(scope.row)">查看</el-button>
                <el-button type="primary" size="small" @click="doEdit(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="doDelete(scope.row)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>

        <el-dialog
            title="提示"
            :visible.sync="edtDlgVisible"
            width="30%"
            :before-close="handleEdit">
            <el-form ref="editForm" :model="edtForm" label-width="80px">
                <el-form-item label="分类名称">
                    <el-input v-model="edtForm.name"></el-input>
                </el-form-item>
                <el-form-item label="分类代码">
                    <el-input v-model="edtForm.code"></el-input>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch v-model="edtForm.status"></el-switch>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="edtDlgVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateRecord">更新</el-button>
            </span>
        </el-dialog>
    </div>
</template>



<script>
import  { getArtCategory,updateCategory,deleteCategory } from '@/api/art'

export default {
    name:'ArtCategoryList',
    data(){
        return {
            categories:[],
            edtDlgVisible: false,
            edtForm:{
                name:'',
                key:'',
                status: true
            }
        }
    },
    methods:{
        /* 自定义方法区*/
        doEdit(row){
            console.log(row)
            this.edtDlgVisible = true;
            this.edtForm = row
            this.edtForm.status = row.status*1 > 0
        },
        handleEdit(){
            /* todo:: 处理编辑事件 */
        },
        updateRecord(){
            updateCategory(this.edtForm).then(res =>{
                console.log(res);
                /* todo:: 更新成功后的处理。
                    1. 关闭对话框  2.刷新列表
                */

            })     
        },
        doDelete(row){
            deleteCategory(row).then(res=>{
                console.log("删除成功")
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                this.refreshTable()
            })
        },
        refreshTable(){
                getArtCategory().then(res=>{
                console.log(res);
                this.categories =  res.data
            })
        }
    },
    created(){
        this.refreshTable()
    },
    beforeCreate(){},
    mounted(){

    }

}

</script>


<style>
</style>